<template>
    <div>
        <el-row style="margin-bottom: 40px">
            <el-col :span="6">
                <el-card style="color: #409EFF">
                    <div><i class="el-icon-money"> 数量</i></div>
                    <div style="padding: 10px 0;font-weight: bold;text-align: center">
                        2
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div id="line" style="width: 500px;height: 400px"></div>
            </el-col>
            <el-col :span="12">
                <div id="pie" style="width: 500px;height: 400px"></div>
            </el-col>
        </el-row>
    </div>

</template>


<script>
    import * as echarts from 'echarts';

    export default {
        name: "HomeView",
        data() {
            return {}
        },
        mounted() {//页面元素渲染之后触发
            //柱状图
            var option = {
                xAxis: {
                    type: 'category',
                    data: ['第一季度', '第二季度', '第三季度', '第四季度']
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '注册人数',
                        data: [],
                        type: 'line'
                    },
                    {
                        name: '注册人数',
                        data: [],
                        type: 'bar'
                    },
                    {
                        name: 'Fake Data',
                        data: [5,10,15,20],
                        type: 'line'
                    },
                    {
                        name: 'Fake Data',
                        data: [5,10,15,20],
                        type: 'bar'
                    }
                ]
            };
            var chartDom = document.getElementById('line');
            var myChart = echarts.init(chartDom);


            //饼图
            var pieOption = {
                title: {
                    text: 'Referer of a Website',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        label: {
                            normal: {
                                show: true,
                                position: 'inner',
                                textStyle: {
                                    fontWeight: 300,
                                    fontSize: 12,
                                    color: "#fff"
                                },
                                formatter: '{d}%'
                            },
                        },
                        radius: '50%',
                        data: [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            var pieChartDom = document.getElementById('pie');
            var mypPieChart = echarts.init(pieChartDom);

            this.request.get("/echarts/members").then(res => {
                // option.xAxis.data = res.data.x;
                option.series[0].data = res.data;
                option.series[1].data = res.data;
                option && myChart.setOption(option);
                pieOption.series[0].data = [
                    {name: "第一季度", value: res.data[0]},
                    {name: "第二季度", value: res.data[1]},
                    {name: "第三季度", value: res.data[2]},
                    {name: "第四季度", value: res.data[3]},];
                pieOption && mypPieChart.setOption(pieOption);

            });
        },
        methods: {
            getLine() {
            },
        },
    }
</script>

<style scoped>

</style>